<template>
  <view>
    <view class="xmain">
      <view style="background: #9fc0f0;">
        <headBar title="任务" color="#9fc0f0"></headBar>
        <image src="~@/static/app_image/task_bg.png" style="width:100%;height:180rpx;" mode="aspectFit"></image>
        <view class="xfuliwrap">
          <view class=" uni-flex uni-row">
            <view class="flex-item xfuliBoxFlem" @click="x_redirect('/pages/coins/coins')">
              <view class="xfuliBox uni-flex uni-column">
                <view class="flex-item xmoneyRed">{{userInfo.coins}}</view>
                <view class="flex-item">当前金币></view>
              </view>
            </view>
            <view class="flex-item xfuliBoxFlem">
              <view class="xfuliBox uni-flex uni-column">
                <view class="flex-item xmoneyRed">0.00￥</view>
                <view class="flex-item">当前余额></view>
              </view>
            </view>
            <view class="flex-item xfuliBoxFlem" style="border-right-color:#f2f6fe !important;">
              <view class="xfuliBox uni-flex uni-column" >
                <view class="xredBtn" @click="x_redirect('/pages/my/withdrawal')">去提现</view>
              </view>
            </view>
          </view>
        </view>
        <view class="xfuliwrap" style="background-image: linear-gradient(45deg, #ff0000, #f1b44d);">
          <view style="color: #FFFFFF; margin-left:20rpx; height:60rpx; line-height: 60rpx;">每日赚钱</view>
          <view class="xSignBoxWrap">
            <view class="uni-flex uni-row ">
              <view class="flex-item xSignBox" v-for="(item,index) in signList">
                <view class="xmoneyRed">{{item.coins}}</view>
                <view v-if="item.status === 0">
                  <image :src="'../../static/app_image/'+item['img']+'.png'" mode="aspectFit" style="width:100%;height:50rpx;" @click="sign(index,item)"></image>
                </view>
                <view style="height:50rpx;line-height: 50rpx;" v-if="item.status === 1">
                  获取
                </view>
                <view style="height:50rpx;line-height: 50rpx;" v-if="item.status === 2">
                  已错过
                </view>
                <view style="color:#96683f">第{{index}}天</view>
              </view>
            </view>
          </view>
        </view>
        <view class="xcjWrap" @click="x_redirect('/pages/lottery/lottery')">
            <view class="xcjWrapTitle">抽奖，赚大量金币</view>
            <view class="uni-flex uni-row ">
              <view class="uni-flex uni-row ">
                <view class="xcjWrapDesc">试一试手气，最高20000金币</view>
              </view>
              <view class="uni-flex uni-row ">
                <view class="xcjWrapBtn ">去抽奖></view>
              </view>
            </view>
        </view>
        <view class="xtaskTitle">
          <view >随手赚</view>
        </view>
        <view class="xtaskWrap">
          <view class="uni-flex uni-row xtaskBox">
            <view class="flex-item xtaskBoxRow xtaskBoxRowIcon">
              <uni-icons type="videocam-filled" size="30" color="#3970df"></uni-icons>
            </view>
            <view class="flex-item xtaskBoxRow xtaskBoxRowText" >
              <view style="font-weight: bold;">看激励视频</view>
              <view class="xtaskBoxRowDesc">立得最高<text class="xtaskColorRed">30000</text>金币</view>
            </view>
            <view class="flex-item xtaskBoxRow" >
              <view class="xredBtn">去领取</view>
            </view>
          </view>
          <view class="uni-flex uni-row xtaskBox">
            <view class="flex-item xtaskBoxRow xtaskBoxRowIcon">
              <uni-icons type="gift-filled" size="30" color="#3970df"></uni-icons>
            </view>
            <view class="flex-item xtaskBoxRow xtaskBoxRowText" @click="x_redirect('/pages/lottery/lottery')">
              <view style="font-weight: bold;">幸运大转盘</view>
              <view class="xtaskBoxRowDesc">抽金币兑好礼</view>
            </view>
            <view class="flex-item xtaskBoxRow" >
              <view class="xredBtn">去领取</view>
            </view>
          </view>
          <view class="uni-flex uni-row xtaskBox">
            <view class="flex-item xtaskBoxRow xtaskBoxRowIcon">
              <uni-icons type="home-filled" size="30" color="#3970df"></uni-icons>
            </view>
            <view class="flex-item xtaskBoxRow xtaskBoxRowText" >
              <view style="font-weight: bold;">添加到桌面</view>
              <view class="xtaskBoxRowDesc">添加桌面，最高<text class="xtaskColorRed">10000</text>金币</view>
            </view>
            <view class="flex-item xtaskBoxRow" @click="createIcon()">
              <view class="xredBtn">去领取</view>
            </view>
          </view>
          <view class="uni-flex uni-row xtaskBox">
            <view class="flex-item xtaskBoxRow xtaskBoxRowIcon">
              <uni-icons type="weixin" size="30" color="#3970df"></uni-icons>
            </view>
            <view class="flex-item xtaskBoxRow xtaskBoxRowText" >
              <view style="font-weight: bold;">分享给群友</view>
              <view class="xtaskBoxRowDesc">分享微信，最高<text class="xtaskColorRed">5000</text>金币</view>
            </view>
            <view class="flex-item xtaskBoxRow" >
              <view class="xredBtn">去领取</view>
            </view>
          </view>
        </view>
        <view class="xtaskTitle">
          <view >金币兑换好礼</view>
        </view>
        <view class="xgoodsWrap">
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/001.png" class="xGoodsImage"  mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/002.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/003.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/004.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/005.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/006.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/007.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/008.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/009.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/010.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/011.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/012.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/013.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/014.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
          <view class="uni-flex uni-row xgoodsWrapLines">
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/015.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
            <view class="flex-item" >
              <image src="https://cdn.quick365.cn/zl/gift_goods/016.png" class="xGoodsImage" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
      <xToastCommon v-if="DialogShow" :isShow="DialogShow" :coins="coins" @hideDialog="handleChangeDialogShow">
        <view class="uni-flex uni-row" style="background: #FFFFFF;border-radius: 10rpx;width:90%;margin: 0rpx auto;">
          <view class="flex-item" style="width:10%;"></view>
          <view class="flex-item" style="width:40%;text-align: center;">
            <image src="~@/static/app_image/ylq.png" style="width:60%;height:180rpx;" mode="aspectFit"></image>
          </view>
          <view class="flex-item" style="width:40%;text-align: left;">
            <view style="margin-top:40rpx;font-weight: bold;color:#d30000;">{{DialogTitle}}</view>
            <view>{{DialogMsg}}</view>
          </view>
        </view>
      </xToastCommon>
      <xToastCoins v-if="coinsDialogShow" :isShow="coinsDialogShow" :coins="coins" @hideDialog="handleChangecoinsDialogShow"></xToastCoins>
      <bootNav nav="task"></bootNav>
    </view>
  </view>

</template>

<script>
import x from '@/common/base.js';
export default {
  data() {
    return {
      userInfo: {},
      signList:{},
      coinsDialogShow:false,
      DialogShow:false,
      DialogTitle:'',
      DialogMsg:'',
      coins:100
    }
  },
  onShareAppMessage() {
    return {
      title: this.title,
    }
  },
  onShareTimeline: function () {
    return {
      title: this.title,
    }
  },
  onLoad(e) {
    var t = this;
    t.getUserInfo();
    t.initSign();
    t.xCacheSet('isAgreement',true);

  },
  methods: {
    getUserInfo() {
      var t = this;
      var userInfo = x.getUserInfo(this);
      if(userInfo){
        t.userInfo = userInfo
      }
    },
    // 初始化签到数据
    initSign(){
      var t = this;
      var initSignList = {1:{coins:300, status:0, img:'hb'}, 2:{coins:500, status:0, img:'hb'}, 3:{coins:1000, status:0, img:'gift'}, 4:{coins:500, status:0, img:'hb'}, 5:{coins:500, status:0, img:'hb'}, 6:{coins:500, status:0, img:'hb'}, 7:{coins:2000, status:0, img:'gift'}};
      var signList = t.xCacheGet('xSignList');
      if(signList){
        for(var i in initSignList){
          if(signList[i]){
            initSignList[i] = signList[i];
          }
        }
      }
      t.signList = initSignList;
    },
    sign(index,item){
      var t =this;
      if(!t.xCacheGet('signLock')){
        var signList = t.xCacheGet('xSignList');
        signList = !signList?{}:signList;
        item['status'] = 1;
        signList[index] = item;
        t.xCacheSet('xSignList',signList);
        t.initSign();
        t.giveCoins('signLock',item.coins,'签到奖励')
      }
    },
    createIcon(){
      //创建桌面图标
      var t = this;
      qa.hasInstalledShortcut({
        success: function (ret) {
          if (ret) {
            // 桌面图标已创建
            t.alertMsg('桌面入口已经存在','无需重新创建');
          } else {
            qa.installShortcut({
              message: '添加桌面获取今日奖励',
              success: function (ret) {
                t.giveCoins('creatIcon',100,'添加桌面奖励');
              },
              fail: function (erromsg, errocode) {
                t.alertMsg('创建失败','请检查权限');
              }.bind(this),
            })
          }
        }.bind(this),
        fail: function (erromsg, errocode) {
          t.alertMsg('创建失败','请检查权限');
        }.bind(this),
        complete: function () {
        }
      })
    },
    handleChangecoinsDialogShow(){
      var t = this;
      t.coinsDialogShow = !t.coinsDialogShow;
    },
    handleChangeDialogShow(){
      var t = this;
      t.DialogShow = !t.DialogShow;
    },
    //获取金币奖励
    giveCoins(key,coins,remark){
      var t = this;
      if(!t.xCacheGet(key)){
        var tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        tomorrow.setHours(0, 0, 0, 0);
        var tomorrowTimestamp = tomorrow.getTime();
        var timestamp = Date.now();
        t.xCacheSet(key,1,(tomorrowTimestamp-timestamp)/1000);
        t.userCoinsRecord(coins,remark);
        t.getUserInfo();
        t.coinsDialogShow = true;
        t.coins = 100;
      }else{
        t.alertMsg('该奖励已领取','明天继续哦~');
      }
    },
    alertMsg(title,msg){
      var t =this;
      t.DialogTitle = title;
      t.DialogMsg = msg;
      t.DialogShow = true;
    }

  }
}
</script>

<style>
@import "./task.css";

</style>
